﻿@{
    Layout = "~/Views/Shared/_MainLayout.cshtml";
    var action = (ViewContext.RouteData.Values["Action"] + "").ToLower();
    var caseInfo = (MFG.Controllers.CaseInfo)ViewBag.caseInfo;
}

<style>
    .page-@action #banner {
        padding-bottom: 30%;
        background-image: url(http://demo.mxyhn.xyz:8020/cssthemes6/12.27ZF25/images/banner1.jpg);
        background-attachment: initial;
    }
    .swiper {
        width: 100%;
        height: 100%;
    }

    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
        .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .swiper {
        margin-left: auto;
        margin-right: auto;
    }

    .swiper-slide {
        background-size: cover;
        background-position: center;
    }

    #caseThumbImgs {
        height: 80px;
        width: 100%;
    }

    #caseImgs {
        height: 100%;
        width: 100%;
        height: 680px;
        height: calc(100vh - 160px);
        min-height: 480px;
        max-height: 700px;
        box-sizing: border-box;
        /* padding: 10px 0; */
    }

    .swiper-slide {
        width: 100%;
        height: 100%;
        opacity: 1;
        text-align: center;
        font-size: 18px;
        background: #000;
    }

    #caseThumbImgs .swiper-slide {
        opacity: .6;
    }

    #caseThumbImgs .swiper-slide-thumb-active {
        opacity: 1;
    }
    .swiper-slide img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        -ms-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        position: absolute;
        left: 50%;
        top: 50%;
    }
</style>
<!-- Begin Banner-->
<div id="banner" class="text-center">
    <div class="content">
        <div class="event-date">木风阁 —— 中国国际知名搭建商</div>
        <!-- <h1></h1> -->
        <p class="lead">
            木风阁是展览展示工程的专业服务商，业务涉及咨询研究、综合策划、设计实施和科技研发
            近年来主要服务于全域文旅、特色小镇、博物馆、科技馆、党建馆、主题馆、企业展厅等。
        </p>
    </div>
</div>

<!-- 标题 -->
<div style="padding:50px 0  40px 0;background: #fff;">
    <div class="container">
        <h1 class="title">@(caseInfo.Title)</h1>
    </div>
</div>

<!-- 轮播案例图 -->
<div style="">
    <div class="container" style="padding-left: 0; padding-right: 0; overflow: hidden; position: relative;">
        <div id="caseImgs" style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff"
             class="swiper mySwiper2">
            <div class="swiper-wrapper">
                @foreach (var item in caseInfo.Images)
                {
                    <div class="swiper-slide">
                        <img src="@item" />
                    </div>
                }

              
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
        <div id="caseThumbImgs" thumbsSlider="" class="swiper mySwiper">
            <div class="swiper-wrapper">
                @foreach (var item in caseInfo.Images)
                {
                    <div class="swiper-slide">
                        <img src="@item" />
                    </div>
                }
            </div>
        </div>
    </div>
</div>


@section Footer{
    <script>
        var galleryThumbs = new Swiper('#caseThumbImgs', {
            spaceBetween: 10,
            slidesPerView: 8,
            loop: true,
            freeMode: true,
            loopedSlides: 5, //looped slides should be the same
            watchSlidesVisibility: true,
            watchSlidesProgress: true,
        });
        var galleryTop = new Swiper('#caseImgs', {
            spaceBetween: 10,
            loop: true,
            loopedSlides: 5, //looped slides should be the same
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            thumbs: {
                swiper: galleryThumbs,
            },
        });
    </script>    
}